<template>
  <a-layout-header :style="headerStyle">
    <div class="float-left text-base font-bold">
      <a-breadcrumb separator="—" class="!leading-[56px] text-base">
        <a-breadcrumb-item>{{ $route.meta.title }}</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="h-full flex items-center justify-end">
      <a-dropdown :trigger="['hover']" :getPopupContainer="getPopupContainer">
        <div class="flex items-center justify-center">
          <an-avatar class="ml-3.5" :size="35" :modelValue="userData?.avatar" :name="userData?.realName" />
          <span class="ml-2 text-sm">{{ userData?.realName }}</span>
          <CaretDownOutlined class="ml-3 text-xl" style="color: #cecece" />
        </div>
        <template #overlay>
          <a-menu class="!w-full">
            <a-menu-item key="0" @click="editPassword">
              <LockOutlined /> 修改密码
            </a-menu-item>
            <a-menu-item key="1" @click="LogOut">
              <LogoutOutlined /> 退出系统
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>
  </a-layout-header>

  <a-modal v-model:open="open" title="修改密码" width="460px" @ok="submit">
    <a-form ref="formItemList" :model="passwordList" :label-col="labelCol">
      <a-form-item label="旧密码" name="oldPassword" :rules="[{ required: true, message: '请输入旧密码' }]">
        <a-input-password autocomplete v-model:value="passwordList.oldPassword" placeholder="密码" current-password>
          <template #prefix>
            <LockOutlined class="site-form-item-icon" style="color: #747474" />
          </template>
        </a-input-password>
      </a-form-item>
      <a-form-item label="新密码" name="password" :rules="[{ required: true, message: '请输入新密码' }]">
        <a-input-password autocomplete v-model:value="passwordList.password" placeholder="密码" current-password>
          <template #prefix>
            <LockOutlined class="site-form-item-icon" style="color: #747474" />
          </template>
        </a-input-password>
      </a-form-item>
      <a-form-item label="新密码" name="newpassword" :rules="[{ required: true, message: '请确认新密码' }]">
        <a-input-password autocomplete v-model:value="passwordList.newpassword" placeholder="密码" current-password>
          <template #prefix>
            <LockOutlined class="site-form-item-icon" style="color: #747474" />
          </template>
        </a-input-password>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import {
  LockOutlined,
  LogoutOutlined,
  CaretDownOutlined,
} from "@ant-design/icons-vue";
import { useUserStore } from "@/store";
import type { CSSProperties } from "vue";
import { message } from "ant-design-vue";
import AnAvatar from "@/components/an-avatar/index.vue";
const labelCol = { style: { width: "80px" } };

const headerStyle: CSSProperties = {
  background: "#fff",
  padding: " 0 12px",
  height: " 56px",
  boxShadow: "0px 0px 4px 1px rgba(51, 51, 51, 0.16)",
};

const open = ref<boolean>(false);
const passwordList = ref<any>({});
const userData = ref<any>({});

const LogOut = () => {
  useUserStore().logOut();
};

const editPassword = () => {
  passwordList.value = {};
  open.value = !open.value;
};

const submit = () => {
  if (passwordList.value.password == passwordList.value.newpassword) {

      message.success("修改密码成功,即将重新登录");
      open.value = !open.value;
      useUserStore().logOut();

  } else {
    message.info("两次新密码不相同, 请重新输入");
  }
};

const getPopupContainer = (trigger: HTMLElement) => {
  return trigger.parentElement;
};

onMounted(() => {
  userData.value = JSON.parse(localStorage.getItem("user") as string);
});
</script>

<style lang="less" scoped></style>
